import React from "react";
import { TouchableOpacity, StyleSheet, View } from "react-native";
import { useTheme } from "@/contexts/ThemeContext";
import { Ionicons } from "@expo/vector-icons";

interface ThemeToggleProps {
  size?: number;
  style?: any;
}

/**
 * 主题切换按钮组件
 *
 * 提供一个简单的按钮来切换应用的深色/浅色模式
 */
const ThemeToggle: React.FC<ThemeToggleProps> = ({ size = 24, style }) => {
  const { themeMode, toggleTheme, colors } = useTheme();

  return (
    <TouchableOpacity
      onPress={toggleTheme}
      style={[styles.container, style]}
      activeOpacity={0.7}
    >
      <View style={[styles.toggle, { backgroundColor: colors.button.primary }]}>
        <View
          style={[
            styles.indicator,
            {
              backgroundColor: colors.primary,
              transform: [{ translateX: themeMode === "dark" ? size / 2 : 0 }],
            },
          ]}
        >
          <Ionicons
            name={themeMode === "dark" ? "moon" : "sunny"}
            size={size * 0.6}
            color={colors.text.white}
          />
        </View>
      </View>
    </TouchableOpacity>
  );
};

const styles = StyleSheet.create({
  container: {
    padding: 4,
  },
  toggle: {
    width: 50,
    height: 26,
    borderRadius: 13,
    padding: 2,
  },
  indicator: {
    width: 22,
    height: 22,
    borderRadius: 11,
    justifyContent: "center",
    alignItems: "center",
  },
});

export default ThemeToggle;
